<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="18">
            <a-col :md="6" :sm="24">
              <a-form-item label="用户名">
                <a-input placeholder="请输入用户名" v-model="queryParam.username"/>
              </a-form-item>
            </a-col>
            <a-col :md="!advanced && 4 || 24" :sm="24">
              <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
                <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
                <a-button style="margin-left: 8px" @click="reset">重置</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>

      <s-table
        ref="table"
        size="default"
        :rowKey="(record,index)=>{return index}"
        :columns="columns"
        :data="loadData"
        showPagination="auto"
      >
        <span slot="serial" slot-scope="text, record, index">
          {{ index + 1 }}
        </span>
        <span slot="statusname" slot-scope="text, record">
          <span>{{record.statusname}}</span>
        </span>
        <span slot="action" slot-scope="text, record">
          <template>
            <a v-action:clearingbtn2 @click="lookCommission(record)">查询佣金</a>
          </template>
        </span>
      </s-table>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { STable } from '@/components'
import { getUserList,getRoLeList } from '@/api/system'
// import StepByStepModal from './modules/StepByStepModal'

const columns = [
  {
    title: '编号',
    scopedSlots: { customRender: 'serial' }
  },
  {
    title: '姓名',
    dataIndex: 'nickname'
  },
  {
    title: '用户名',
    dataIndex: 'username'
  },
  {
    title: '手机号',
    dataIndex: 'mobile',
  },
  {
    title: '可用佣金',
    dataIndex: 'available_balance',
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: '250px',
    scopedSlots: { customRender: 'action' }
  }
]
export default {
  components: {
    STable,
  },
  data () {
    this.columns = columns
    return {
      confirmLoading: false,
      // 高级搜索 展开/关闭
      advanced: false,
      // 查询参数
      queryParam: {},
      loadData: parameter => {
        const params = {
          role_id:localStorage.getItem('ywy_role_id') || localStorage.getItem('role_id')//ywy_role_id是在app.vue页面中获取并缓存的
        }
        const requestParameters = Object.assign({}, parameter, params, this.queryParam)
        return getUserList(requestParameters).then(res => {
          return res.data
        })
      },
      // 加载数据方法 必须为 Promise 对象
      // loadData: parameter => {
      //   const requestParameters = Object.assign({}, parameter, this.queryParam)
      //   console.log('loadData request parameters:', requestParameters)
      //   return getUserList(requestParameters).then(res => {
      //     return res.data
      //   })
      // },
    }
  },
  computed: {
    
  },
  created() {
    // 部门查询
    //this.DepartmentList()
    // 角色查询
    // this.RoLeList()
    // if(localStorage.getItem('user_type') == 2) {
    //   this.userShow = true
    // }
    // this.getRoleList()
    // this.getYWYID()
  },
  methods: {
    lookCommission(record) {
      this.$router.push('/yzusalesman/commission/index?user_id='+record.id)
    },
    toggleAdvanced () {
      this.advanced = !this.advanced
    },
    // 重置
    reset () {
      // const form = this.$refs.createModal.form
      this.queryParam = {}
        // 重置表单数据
      // form.resetFields()
      // 刷新表格
      this.$refs.table.refresh()
    }
  }
  
}
</script>
